<template>
	<view class="page">
		<view class="tips">
			注意：当天不能订餐，只能预定明天发布菜品的日期！
			预约后再点击便会取消预约！
		</view>
		<view class="infoBox">
			<view class="name">
				<view class="text">
					您好，{{userInfo.memberName}}
				</view>
				<!-- <view class="rightText" @click="goPage('/pages/componentsC/dingcanMan/statistics')">
					查看订餐统计
				</view> -->
			</view>
			<!-- <view class="address">
				所在食堂：清华同方公司食堂
			</view> -->
			<view class="dateBox">
				<view class="box">
					<view class="text">
						明天日期
					</view>
					<view class="val">
						{{tomorrow}}
					</view>
				</view>
				<view class="box" style="border-left: 2rpx solid #bcbcbc;">
					<view class="text">
						食堂状态
					</view>
					<view class="val" style="color: #4089f0;">
						{{ isOrder ? '可预约' : '不可预约'}}
					</view>
				</view>
			</view>
		</view>
		<view class="detailBtn" @click="goPage('/pages/componentsC/dingcanMan/dingcanManDetail',{
			merchNo
		})">
			查看预约详情
		</view>
		<view class="btn" v-for="(item,index) in mealtype" :key="index" @click="handleOrder(item.id)">
			{{ item.isOrder ? '已预约':'预约'}}{{item.name}}
		</view>
	
	</view>
</template>

<script>
	import {getTbAdvanceOrderApi,getMealtypeApi,singleSaveOrderApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				tomorrow : '',
				isOrder: true,
				mealtype : [],
				userInfo : uni.getStorageSync('selectInfoAccount'),
				merchNo : ''
			}
		},
		methods: {
			initInfo(){
				// console.log(this.$route.query.merchNo);
				return getTbAdvanceOrderApi(this.tomorrow,{
					merchNo : this.merchNo
				}).then(res=>{
					if(!res.mealschedule.length) this.isOrder = false
					this.mealtype.forEach((item,index)=>{
						item.isOrder = false
						let tempIndex = res.orderList.findIndex(item2=>{
							return item.id == item2.mealTypeId
						})
						if(tempIndex != -1){
							item.isOrder = true
						}
						this.$set(this.mealtype,index,item)
					})
					console.log(this.mealtype);
					
				})
			},
			getMealtype(){
				getMealtypeApi({
					merchNo : this.merchNo
				}).then(res=>{
					this.mealtype = res.mealtypeList
				})
			},
			handleOrder(id){
				singleSaveOrderApi({
					eatDate : this.tomorrow,
					mealTypeId : id,
					merchNo : this.merchNo
				}).then(res=>{
					this.initInfo().then(res=>{
						this.setMessage('操作成功！')
					})
				})
			}
		},
		 onLoad() {
			this.merchNo = this.$route.query.merchNo
			let date = new Date();
			date = new Date(date.getTime() + 24 * 60 * 60 * 1000);
			let year = date.getFullYear();//
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month.toString().padStart(2,'0')
			day = day.toString().padStart(2,'0')
			this.tomorrow = `${year}-${month}-${day}`;
			
		},
		async onShow() {
			await this.getMealtype()
			this.initInfo()
		},
	}
</script>

<style lang="scss" scoped>
.page{
	.tips{
		background-color: #fff;
		border-radius: 20rpx;
		@include flexCenter;
		width: 90%;
		margin: 20rpx auto;
		padding: 30rpx;
	}
	.infoBox{
		width: 90%;
		margin: 40rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		.name{
			display: flex;
			justify-content: space-between;
			.text{
				font-weight: 600;
				font-size: 34rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			.rightText{
				color: #4089f0;
			}
			
		}
		.address{
			margin-bottom: 20rpx;
			color: #4089f0;
		}
		
		.dateBox{
			height: 190rpx;
			display: flex;
			padding: 20rpx 0;
			.box{
				flex: 1;
				@include flexColCenter;
				justify-content: space-between;
				.text{
					color: #bcbcbc;
					font-size: 32rpx;
				}
				.val{
					color: #333;
					font-size: 34rpx;
					font-weight: 600;
				}
			}
		}
	}

	.detailBtn{
		background-color: #2979ff;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		width: 90%;
		margin: 30rpx auto;
		@include flexCenter;
		height: 80rpx;
	}
	.btn{
		background-color: #2b85e4  ;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		width: 90%;
		margin: 30rpx auto;
		@include flexCenter;
		height: 80rpx;
	}
}
</style>
